/**
  商品页 css
**/
.main{
    width: 960px;
    margin: 0 auto;
}
 
 header{
   height: 200px;
 }

.fun{
  display: flex;
  margin-top: 30px;
}
#app .fun .img{
  flex:1.2;
  border: 1px;
  box-shadow: #bebebe 0px 0px 2px;
  height: 400px;
 
  line-height: 400px;
  text-align: center;
}
.pro-info{
  flex: 2;
  margin-left: 20px;
 

}
.pro-info h1{
  margin:   0 0 20px 0;
  font-size: 2em;
}

.pro-info .price span{
  cursor: pointer; 
  width: 148px;
  line-height: 30px;
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
  padding: 5px 30px;
  margin-right: 20px;
  transition: all  .3s ease 0s;
  border-radius: 5px;
}
.pro-info .price .select{
  color: #fff;
  background-color: #00d7c8;
  border-color: #00d7c8;
  padding: 5px 30px;
  border-radius: 5px;
  box-shadow: 0 0 0 0.2rem rgba(51, 223, 211,0.2);
}
.pro-info .price .select:hover{
  color: #fff;
    background-color: #33dfd3;
    border-color: #33dfd3;
}
.pro-info .price span:hover{
  background-color: #e2e6ea;
    border-color: #dae0e5;
}

.pro-info .price{
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
  border-top: 1px solid #ededed;
  padding-bottom: 40px;
  text-align: center;
  border-bottom: 1px solid #ededed;
}
.pro-info .sum {
   padding-top: 20px;
}
.pro-info .sum>span{
  margin-right: 20px;
}
.pro-info .total {
  height: 150px;
  padding-top: 20px;

}
.pro-info .total>span:nth-child(1){
  color: #00d7c8;
  font-size: 20px;
  width: 120px;
  display: inline-block;
}
.pro-info .total>span:nth-child(2){
  color: #fff;
  background-color: #00d7c8;
  border-color: #00d7c8;
  padding: 10px 30px;
  border-radius: 5px;
  cursor: pointer;
  height: 30px;
  width: 148px;
  line-height: 30px;
  transition: all  .3s ease 0s;
}
.pro-info .total>span:nth-child(2):hover{
  background: #3E444A;
}
.attention{
  margin-top: 40px;
  border: 1px solid #ededed;
  padding: 20px;
}
.attention>ul{
  list-style: none;
  display: flex;
  justify-content: space-around;
  padding-bottom: 20px;
  border-bottom: 1px solid #ededed;

}
.attention ul li {
  display: flex;
  align-items: center;
}

.attention ul li img{
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.attention ul li>div p{
   margin: 0;
   padding: 0;
   margin-bottom: 10px;
}
.attention .tips{
  margin-top: 50px;
}
.attention .tips ul{
  margin-bottom: 50px;
}
.attention .tips ul>li:nth-child(1){
  box-sizing: border-box;
  font-family: 微软雅黑, "Microsoft YaHei";
  color: rgb(0, 0, 0);
  font-weight: bold;
}
.attention .tips ul>li:not(:first-child){
  margin: 20px 0;
}

 
 
#app .main .search {
 
  height: 150px;
  margin: 0 auto;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
#app .main .search .img {
  flex: 3;
}
#app .main .search .search-input {
  flex: 3;
}
#app .main .search .search-input input {
  width: 80%;
  outline: none;
  height: 40px;
  border: 1px solid #00d7c8;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  padding-left: 30px;
}
#app .main .search .search-input button {
  width: 20%;
  outline: none;
  height: 40px;
  border: 1px solid #00d7c8;
  background-color: #00d7c8;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  color: white;
}
#app .main .box {
  
  margin: 0 auto;
}
#app .main .box .carousel .el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
#app .main .box .carousel .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
#app .main .box .carousel .el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
#app .main .box .send ul {
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#app .main .box .send ul li {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  float: left;
}
#app .main .box .send ul li i {
  font-size: 30px;
  color: #00d7c8;
}
#app .main .box .send ul li .cont {
  margin-left: 10px;
}
#app .main .box .send ul li .cont .big {
  font-size: 18px;
}
#app .main .box .sell {
  width: 80%;
  margin: 0 auto;
}
#app .main .box .sell .title {
  height: 100px;
  font-size: 40px;
  width: 100%;
  text-align: center;
}
#app .main .box .sell .goods {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  align-items: center;
}
#app .main .box .sell .goods .goods-item {
  height: 150px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  margin: 10px;
  border: 1px;
  box-shadow: #bebebe 0px 0px 10px;
}
#app .main .box .sell .goods .goods-item img {
  flex: 1;
  margin: 0 auto;
  width: 150px;
}
#app .main .box .sell .goods .goods-item div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}